<template>
  <div>
    <!-- <img class="ban_img" src="https://s1.ax1x.com/2020/08/18/dK96uF.jpg" /> -->

    <div class="con">
      <div class="flex_bw">
        <i class="el-icon-arrow-left" @click="back" style="font-size: 25px;"></i>
        <el-input placeholder="请输入内容" size="mini" v-model="input1" style="width:60vw">
          <template slot="prepend">
            <div style="30px">
              <span>上海</span>
              <i class="el-icon-caret-bottom"></i>
            </div>
          </template>
        </el-input>
        <i class="el-icon-s-custom" style="font-size: 25px;"></i>
        <span class="">登陆</span>
      </div>
      <!--  -->

    </div>
     <el-carousel height="120px">
      <el-carousel-item v-for="i in swiper_list" :key="i">
        <img :src="i.img" class="swiper_img"/>
      </el-carousel-item>
    </el-carousel>
    <!-- 占位 -->
    <div style="height: 15px;"></div>
    <!-- 必游景点 -->
    <div class="con">
     <div class="con_tit"><span class="f-daytour-thumb"></span>必游景点推荐</div>
     <div class="flex_bw" style="flex-wrap: wrap;margin-top: 10px; ">
     <div v-for="i in tui" :key="i">
         <img :src="i.img" class="tui_img"/>
         <div class="con_text">{{i.tit.length>5?i.tit.substr(0,5)+'...':i.tit }}</div>
         <div class="hui_1" style=" margin-bottom:10px ;">26条相关路线</div>
     </div>
     </div>
     
    </div>
    <!-- end -->
   <div class="flex_center">
     <el-button type="primary" plain>上海全部一日游</el-button>
   </div> 

     <div style="height: 5px;background-color: #EAEDED;margin-top: 10px"></div>
 <!-- 热门城市 -->
    <div class="con">
     <div class="con_tit"><span class="f-daytour-thumb"></span>周边热门城市</div>
     <div class="flex_bw" style="flex-wrap: wrap;margin-top: 10px; ">
    
         <div  v-for="i in city" :key="i" class="tag_city flex_center">{{i}}</div>
        
     </div>
    </div>

     <div style="height: 5px;background-color: #EAEDED;margin-top: 10px"></div>
    
    <!-- 精选 -->
   <el-tabs stretch v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="精选一日游" name="first">
        <div class="con flex_bw" style=" border: 1px solid #F5F5F5;" v-for="i in jingxuan" :key="i">
          <img :src="i.img" class="jx_img"/>
          <div  class="right_jx_box">
              <p>{{i.tit}}</p>
              <el-tag type="danger" style="width: 60px;" size="mini">可定明日</el-tag>
              <div><span>4.9分</span> <span class="hui_1">月销1120</span> <span>¥100</span></div>
          </div>
        </div>

    </el-tab-pane>
    <el-tab-pane label="景点门票" name="second">
            <div class="con flex_bw" style=" border: 1px solid #F5F5F5;" v-for="i in jingdian" :key="i">
          <img :src="i.img" class="jx_img"/>
          <div  class="right_jx_box">
              <p>{{i.tit}}</p>
              <el-tag type="danger" style="width: 60px;" size="mini">可定明日</el-tag>
              <div><span>4.9分</span> <span class="hui_1">月销1120</span> <span>¥100</span></div>
          </div>
        </div>
    </el-tab-pane>
    <el-tab-pane label="其他玩乐" name="third">
          <div class="con flex_bw" style=" border: 1px solid #F5F5F5;" v-for="i in other" :key="i">
          <img :src="i.img" class="jx_img"/>
          <div  class="right_jx_box">
              <p>{{i.tit.length>10?i.tit.substr(0,10)+'...':i.tit }}</p>
              <el-tag type="danger" style="width: 60px;" size="mini">可定明日</el-tag>
              <div><span>4.9分</span> <span class="hui_1">月销1120</span> <span>¥100</span></div>
          </div>
        </div>
    </el-tab-pane>
  </el-tabs>
  
  <div class="con">
<el-button type="primary" style="width:100%">查看上海全部玩乐</el-button>
  </div>
    
 
   
     
  </div>
</template>

<script>
export default {
  name: "OneDay",
  data() {
    return { 
        activeName: 'first',
        cur:0,    
      input1: "",
      city:['乌镇','嘉兴','桐乡','嘉善','西塘','迪士尼度假区','苏州','周庄'],
      swiper_list:[
          {
              img:'https://dimg04.c-ctrip.com/images/0zg3l12000816ijd0B05D.jpg',
          },
          {
              img:'https://dimg04.c-ctrip.com/images/0zg5d12000812eit1468C.png',
          },
          {
              img:'https://dimg04.c-ctrip.com/images/0zg1l120004f2pv1d0C36.jpg'
          }
      ],
      tui:[{
          img:'https://dimg01.c-ctrip.com/images/100n1f000001gpdzo88FC_C_210_118.jpg',
          tit:'上海城市历史发展'
      },{
          img:' https://dimg02.c-ctrip.com/images/100w1f000001gw9498A72_C_210_118.jpg',
          tit:'东方明珠'
      },{
          img:'https://dimg08.c-ctrip.com/images/100h0z000000mkjxn58E1_C_210_118.jpg',
          tit:'外滩'
      },
      {
          img:'https://dimg03.c-ctrip.com/images/100u0j000000aezmrF549_C_210_118.jpg',
          tit:'浦江游览'
      },
      {
          img:'https://dimg05.c-ctrip.com/images/100l1f000001gqi1p4B80_C_210_118.jpg',
          tit:'城隍庙旅游区'
      },
      {
          img:'https://dimg02.c-ctrip.com/images/10051f000001gsqk8D0BC_C_210_118.jpg',
          tit:'上海迪士尼'
      },
      
      ],
     jingxuan:[
         { 
            tit:'苏州周庄一日游',
           img:'https://dimg04.c-ctrip.com/images/350d13000000tqdqrE203_C_250_250_Q80.jpg',  
         },
         {
             tit:'嘉兴乌镇+西珊...',
             img:'https://dimg04.c-ctrip.com/images/3507160000010sj0t6462_C_250_250_Q80.jpg',
         },
         {
            tit:'上海东方明珠',
            img:'https://dimg04.c-ctrip.com/images/350e13000000ucd98556C_C_250_250_Q80.jpg'
         },
         {
             tit:'苏州虎丘',
             img:'https://dimg07.c-ctrip.com/images/fd/tg/g2/M09/8E/2A/Cghzf1WxCriAW4dXABSVU-vqayI115_C_250_250_Q80.jpg'
         },
         {
             tit:'苏州拙政园+寒山寺',
             img:'https://dimg04.c-ctrip.com/images/3505170000010tt0qC514_C_250_250_Q80.jpg'
         },
         {
             tit:'上海东方明珠+浦江游船',
             img:'https://dimg01.c-ctrip.com/images/100d1c000001d59od1BE9_C_250_250_Q80.jpg'
         },

     ],
     jingdian:[
         {
             img:'https://youimg1.c-ctrip.com/target/10051f000001gsqk8D0BC_C_130_130_Q80.jpg',
             tit:'上海迪士尼度假区'
         },
         {
             img:'：https://youimg1.c-ctrip.com/target/10061f000001gqup08BE8_C_130_130_Q80.jpg',
             tit:'上海玛雅海滩水公园'
         },
         {
             img:'https://youimg1.c-ctrip.com/target/100s1f000001gx3sr61E6_C_130_130_Q80.jpg',
             tit:'上海海昌海洋公园'
         },
         {
             img:'https://youimg1.c-ctrip.com/target/100s060000001xwem6D09_C_130_130_Q80.jpg',
             tit:'上海欢乐谷'
         },
         {
             img:'https://youimg1.c-ctrip.com/target/100w1f000001gw9498A72_C_130_130_Q80.jpg',
             tit:'东方明珠'
         },
         {
             img:'https://youimg1.c-ctrip.com/target/100j1h000001hkwyw2759_C_130_130_Q80.jpg',
             tit:'上海野生动物园'
         },
         {
             img:'https://youimg1.c-ctrip.com/target/100t1f000001gqbe28730_C_130_130_Q80.jpg',
             tit:'上海科技馆'
         }
     ],
     other:[
         {
             tit:'上海浦东机场 自助停车+24H免费接送',
             img:'https://dimg04.c-ctrip.com/images/0352t1200002i79bqA0D6_C_250_250_Q80.jpg'
         },
          {
             tit:'上海虹桥火车站',
             img:'https://dimg04.c-ctrip.com/images/350m1f000001gwtf70846_C_250_250_Q80.jpg'
         },
          {
             tit:'东方明珠旋转餐厅',
             img:'https://dimg04.c-ctrip.com/images/350k180000013p22x9F94_C_250_250_Q80.jpg'
         }
         
     ]
    
     

    };
  },
  mounted() {},
  created() {
    this.ren_data=this.jing_list;
  },
  methods: {
    back(){
      this.$router.go(-1);
    },
    choose_ren(e){
      this.ren_index=e;
      console.log(this.ren_index);
      if(e==0) return this.ren_data=this.jing_list;
      if(e==1) return this.ren_data=this.jiudian_list;
      if(e==2||e==3) return this.ren_data=this.meishi_list;
    }
  },
};
</script>

<style scoped>
.swiper_img{
  width: 100vw;
  height: 120px;
}
.right_jx_box{
    display: flex;
    flex-direction: column;
    height: 30vw;
    justify-content: space-between;
   
}
.jx_img{
    width: 30vw;
    height: 30vw;
   
}
.tag_city{
    width: 18vw;
    height: 6vw;
    background-color: #BBDEFB  ;
    margin-top: 10px;
    padding: 5px;
    font-size: 13px;
   
}
.tui_img{
    width: 28vw;
    height: 15vw;
}
.hui_1{
  font-size: 13px;
  color: #BDC3C7 ;
  margin-top: 5px;
  
}
.super_img{
  width: 6vw;
  height: 6vw;
  margin-left: 5px;
}
.wrap{
  flex-wrap: wrap;
}
.shop_box{
  width: 28vw;
  height: 16vw;
  margin-top: 2vw;
  border: 1px solid #E5E7E9 ;
}
.right_box{
  width: 60%;
  height: 100%;

}
.con_img{
  
   width: 100px;
   height: 70px;
   
}
.active{
  color: white;
  background-color: #5DADE2;
}
.remen_btn{
  width: 20vw;
  height: 30px;
  border: 1px solid #F2F3F4  ;
}
.con_tit{
  font-size: 18px;
 
}
.con_text{
  font-size: 15px;
  color: #34495E;
  margin-top: 10px;
  line-height: 20px;
}
.tab_icon {
  widows: 60px;
  height: 60px;
}
.top_btm {
  color: white;
  margin-top: 13vh;
}
.top_icon {
  color: white;
  font-size: 18px;
}
.flex_bw {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.flex_center{
  display: flex;
  align-items: center;
  justify-content: center;
 
  flex-direction: column;
}
.con {
  padding: 15px;
  
}
.ban_img {
  width: 100vw;
  height: 30vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.hearder_input {
  align-items: center;
}
.lateral-sliding {
  display: flex;
  overflow-y: hidden;
  overflow-x: scroll;

}
.lateral-sliding::-webkit-scrollbar {
  display: none;
}
.lateral-sliding-item {
  display: flex;
  margin-right: 8px;
  /* background-color: yellow; */
}
.item_box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
